
<template>
  <div  class="subject" style="background:#f4f5f7;width:100% ;" >
<!--    头部 导航栏-->
<navi></navi>
    <!--  轮播图 资讯-->
    <div class="main" style=" width: 80%; margin: 0 auto;margin-top: 10px;">
      <!--  轮播图-->
      <div class="block" style="width: 71%; float: left">
        <el-carousel height="250px">
          <el-carousel-item  v-for="(carouselmap,index) in news.carouselmaps" :key="index" >
            <img :src="getImgUrl(carouselmap.cmimg)" style="height: 250px;width: 100%">
          </el-carousel-item>
        </el-carousel>
      </div>
<!--      资讯-->
      <div style="width: 28%; height: 20px;  float: right;font-size: 0.85rem;padding-bottom: 5px; ">
      <img style="width: 17px; height: 17px;vertical-align:middle;" src="static/images/icon/fwzx.png">
      <span style="vertical-align:middle;">图书快讯</span>
      </div>
      <carouselmap class="carouselmap"></carouselmap>
<!--      图书分类-->
      <div class="ranklist">
        <div style=" padding: 20px 0 5px 0">
          <img style="width: 17px; height: 17px;vertical-align:middle;" src="static/images/icon/book.png">
          <span style="vertical-align:middle; font-size: 0.85rem">图书分类</span>
        </div>
        <bookskind></bookskind>
      </div>
<!--      热门书籍-->
      <div class="ranklists">
        <div style=" padding: 20px 0 5px 0">
          <img style="width: 17px; height: 17px;vertical-align:middle;" src="static/images/icon/fwzx.png">
          <span style="vertical-align:middle; font-size: 0.85rem" >热门书籍</span>
        </div>
        <bookranklist class="renklists"></bookranklist>
      </div>

    </div>
    <!--网页底部-->
    <bottom></bottom>

  </div>

</template>
<script>
import api from "../../../axios/api";
import Bookranklist from "../public/bookranklist";
import carouselmap from "../public/carouselmap";
import bottom from "../public/bottom";
import navi from "../public/navi";
import bookskind from "../front/bookskind/bookskind";

export default {
  name: "index",
  components: {Bookranklist,bookskind,carouselmap,bottom,navi},
  data(){
    return{
      news:"",
      item:["./static/images/1.jpg", "./static/images/2.jpg","./static/images/3.jpg", "./static/images/8.jpg"]
    }
  },
  methods:{
    getImgUrl: function (imgsrc) {
      return  this.$store.state.host + "/upload/images/carouselmap/" + imgsrc;
    },
    setDataFromAxios: function () {
      //this.initpic();
      //console.log(prno)
      //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
      api.setDataFromAxios( "/api/newsController/selectNewsWithCarouselmap/001", null, "post")
        .then(dto => {
          // console.log(dto);
          this.news = dto.t;
        });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）

    },

  },
  created() {
    this.setDataFromAxios();
  }
}
</script>
<style scoped>
@media (max-width: 1600px) {
  html{font-size:62.5%;}
  body {font:normal 100% Arial,sans-serif;font-size:14px; font-size:1.4rem; }
  .subject {
    width: 100%;
  }
  .main{
    width:1200px;
  }
}
 .carouselmap{float: right;width: 28%;height: 223px;border-radius: 5px;border: 1px solid #eee; background: #fff;}
 .carouselmap span{display: inline-block}
.main >.ranklist{ width:65%; height: px; float: left;}
.main >.ranklists{ width:34%; height: 540px; float: right;}

</style>
